import React, {Component} from 'react';
import './HotCmd.less'


class HotCmd extends Component {
    constructor(props) {
        super(props);
        this.state={
            liStyle:{
                1:'cmd',
                2:''
            }
        }
    }

    componentDidMount() {

    }


    render() {
        const {liStyle} =this.state;
        return (
            <div className='container'>
                {/*热门推荐*/}
                <div className='n-rcmd'>
                    <div className='v-hd2'>
                        <div className='circle'>
                            <span></span>
                        </div>
                        <h2>{this.props.title}</h2>
                        <ul>
                            {
                                this.props.tabs ?
                                    this.props.tabs.map((item, index) => {
                                        return (
                                            <li key={index}>
                                                {item}
                                                <span className='line'>|</span>
                                            </li>
                                        )
                                    })
                                    :
                                    <li/>
                            }
                        </ul>
                        {
                            this.props.more?
                                <span className='more'>
                                    更多
                                </span>
                                :
                                <span></span>
                        }
                        {/*<span className='more'>*/}
                            {/*更多*/}
                        {/*</span>*/}
                    </div>
                    <ul className='list'>
                        {
                            this.props.calendar?
                            <li >
                                <span className='head'>星期六</span>
                                <span className='bd'>2</span>
                                <span className='day'>每日歌曲推荐</span>
                                <span className='desc'>根据你的口味生成，<br/>每天6:00更新</span>
                            </li>
                                :
                                ''
                        }
                        {
                            this.props.list?
                                this.props.list.map((item, index) => {
                                    const playCount = Math.floor(item.playCount / 10000);
                                    return (
                                        <li key={index} className={liStyle[this.props.type]}>
                                            <div>
                                                <img src={item.picUrl} alt=""/>
                                                <div className='bottom'>
                                                    <span className="iconfont headset">&#xe602; </span>
                                                    <span className='nb'>{playCount}万</span>
                                                    <span className={'play iconfont'}>&#xe626; </span>
                                                </div>
                                                <span className='song_name'>{item.name}</span>
                                                {
                                                   this.props.type===1?
                                                    <span className='song_desc'>{item.copywriter}
                                                        <div>
                                                            <button>不感兴趣</button>
                                                        </div>
                                                    </span>
                                                       :
                                                       ''
                                                }
                                                <div className='mb'></div>
                                            </div>
                                        </li>
                                    )
                                })
                                :
                                <div>数据加载中</div>
                        }
                    </ul>
                </div>



            </div>


        );
    }
}

export default HotCmd;